<template>
  <el-dialog :visible="visible"
             :before-close="close"
             :close-on-click-modal="false"
             :top="idCard ? '18vh' : '8vh'"
             :width="idCard ? '40%' : '31%'"
             append-to-body
             title="示例">
    <div v-if="idCard">
      <div class="content">
        <img width="48%"
             height="215"
             :src="require('@static/images/IDCard-positive.png')" />
        <img width="48%"
             height="215"
             :src="require('@static/images/IDCard-back.png')" />
      </div>
      <div class="content">
        <p>身份证人像页</p>
        <p>身份证国徽页</p>
      </div>
    </div>
    <div v-else
         class="all-center">
      <img width="96%"
           height="710"
           :src="require('@static/images/application.png')" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ApplicationDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    idCard: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    };
  },
  created () {

  },
  methods: {
    // 取消
    close () {
      this.$emit("update:visible", false);
    },
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mt10 {
  margin-top: 10px;
}
.cost-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.fontSty1 {
  color: var(--prev-color-text-ashes);
  display: flex;
  justify-content: flex-end;
  height: 40px;
  line-height: 40px;
}
.fontSty2 {
  color: var(--prev-color-primary);
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}
.all-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
